function generateData() {
	const res = [];
	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
	for (let i = 0; i < 500; ++i) {
		res.push({
			time: time.getTime() / 1000,
			value: i,
		});

		time.setUTCDate(time.getUTCDate() + 1);
	}
	return res;
}

function svgToDataUrl(svgString) {
	// Encode the SVG string
	const encodedSvg = encodeURIComponent(svgString);

	// Create the data URL
	const dataUrl = `data:image/svg+xml;charset=utf-8,${encodedSvg}`;

	return dataUrl;
}

const svgString = `<svg width="445" height="370" viewBox="0 0 445 370" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_101_2" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="75" y="15" width="300" height="300">
<rect x="75" y="15" width="300" height="300" rx="30" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_101_2)">
<rect x="74" y="15" width="300" height="300" fill="url(#paint0_linear_101_2)"/>
<g style="mix-blend-mode:luminosity">
<path d="M374 15H74V315H374V15Z" fill="white"/>
<g style="mix-blend-mode:luminosity" opacity="0.42" filter="url(#filter0_f_101_2)">
<path d="M224.5 282C289.946 282 343 231.408 343 169C343 106.592 289.946 56 224.5 56C159.054 56 106 106.592 106 169C106 231.408 159.054 282 224.5 282Z" fill="#434651" fill-opacity="0.5"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M78 47V284.5C78.8333 293.333 85.1 311.2 103.5 312C121.9 312.8 274.833 312.333 349 312C356.333 308.667 371 299.5 371 289.5V44.5C370.333 35.8333 365 18.4 349 18C333 17.6 176.667 17.8333 100.5 18C93 19.6667 78 27.8 78 47ZM220 284.5L100.5 248C86.9 241.6 94.8333 232.667 100.5 229L211.5 174.5C251.167 186.667 332.4 211.6 340 214C347.6 216.4 344.833 225 342.5 229C322.333 242.5 278.3 271.7 263.5 280.5C248.7 289.3 228.333 286.833 220 284.5Z" fill="white"/>
<path d="M371 289.5C371 299.5 356.333 308.667 349 312C274.833 312.333 121.9 312.8 103.5 312C85.1 311.2 78.8333 293.333 78 284.5V47C78 27.8 93 19.6667 100.5 18C176.667 17.8333 333 17.6 349 18C365 18.4 370.333 35.8333 371 44.5M371 289.5C371 279.5 371 122 371 44.5M371 289.5V44.5M100.5 248L220 284.5C228.333 286.833 248.7 289.3 263.5 280.5C278.3 271.7 322.333 242.5 342.5 229C344.833 225 347.6 216.4 340 214C332.4 211.6 251.167 186.667 211.5 174.5L100.5 229C94.8333 232.667 86.9 241.6 100.5 248Z" stroke="black"/>
<path d="M136.384 258.757L99.7262 247.673C91.5706 245.206 90.5712 233.98 98.161 230.092L186.39 184.889C198.507 178.681 212.509 177.324 225.579 181.091L337.928 213.47C345.768 215.729 347.265 226.265 340.37 230.65L323.896 241.127M136.384 258.757L104.678 279.13M136.384 258.757L180.091 271.756M180.091 271.756L216.512 282.713C236.049 288.591 257.175 285.321 274.059 273.806L291.067 262.207M180.091 271.756L148.424 292M291.067 262.207L329.188 273.794M291.067 262.207L323.896 241.127M323.896 241.127L362 252.62" stroke="#5D606B" stroke-width="10" stroke-linecap="round"/>
<rect x="78" y="18" width="293" height="294" rx="27" stroke="#753636" stroke-width="6"/>
</g>
</g>
<path d="M334.887 70.2296C313 128.139 279.557 154.294 254.462 162.621C253.895 166.583 251.927 170.214 248.913 172.857C245.899 175.501 242.037 176.984 238.024 177.039C235.797 177.002 233.599 176.528 231.555 175.644C229.512 174.76 227.663 173.483 226.115 171.887C224.567 170.29 223.349 168.405 222.531 166.339C221.713 164.273 221.312 162.066 221.349 159.845C221.349 157.14 221.939 154.576 223 152.318L199.156 127.621C196.218 129.847 192.607 131.007 188.919 130.909C185.231 130.811 181.687 129.46 178.873 127.08L119.297 172.946C131.278 188.611 146.632 201.477 163.684 209.357L164.274 209.639H165.028C165.328 209.634 165.626 209.619 165.925 209.592C166.538 209.569 167.387 209.475 168.495 209.357C171.579 208.923 174.623 208.246 177.599 207.334C185.747 204.817 193.462 201.074 200.476 196.232C197.736 204.567 192.388 211.805 185.217 216.884L192.057 218.295C221.844 224.458 256.844 215.026 283.943 192.469C309.085 171.535 327.292 141.169 328.401 99.678C336.986 84.5775 343.425 65.3372 346.491 56.1639L346.656 55.717L339.109 59.2452C337.807 62.9571 336.391 66.6281 334.863 70.2531L334.887 70.2296Z" fill="#4994EC"/>
<path d="M115.476 167.725C108.171 157.222 102.449 145.707 98.4953 133.548L98 132.043L98.7075 130.679C126.231 79.3323 187.316 59.6451 234.557 77.5917L236.349 78.2973L236.608 80.3437C237.472 87.8787 240.01 95.1267 244.038 101.56C246.273 104.705 248.905 107.551 251.868 110.027C244.792 94.668 246.325 82.7193 246.325 82.7193L250.712 85.5418C270.453 97.3965 297.363 100.642 320.288 86.5768C300.17 128.444 274.132 148.555 254.203 155.799C253.394 152.104 251.354 148.792 248.416 146.4C245.479 144.008 241.816 142.679 238.024 142.628C233.887 142.63 229.907 144.202 226.892 147.026L203.448 122.799C205.102 120.058 205.975 116.919 205.972 113.72C206.012 111.499 205.614 109.292 204.799 107.225C203.984 105.157 202.769 103.27 201.223 101.671C199.676 100.073 197.829 98.7932 195.787 97.9063C193.745 97.0194 191.548 96.5425 189.321 96.5027C187.094 96.5425 184.896 97.0194 182.854 97.9063C180.812 98.7932 178.965 100.073 177.419 101.671C175.873 103.27 174.657 105.157 173.843 107.225C173.028 109.292 172.629 111.499 172.67 113.72C172.67 116.754 173.425 119.6 174.769 122.07L115.453 167.725H115.476Z" fill="#4994EC"/>
<path d="M199.651 113.72C199.651 119.6 195.005 124.352 189.321 124.352C186.541 124.302 183.895 123.155 181.963 121.162C180.03 119.169 178.97 116.492 179.014 113.72C179.014 107.84 183.637 103.065 189.321 103.065C190.699 103.09 192.059 103.385 193.323 103.933C194.587 104.482 195.73 105.274 196.687 106.263C197.644 107.253 198.397 108.421 198.901 109.7C199.406 110.98 199.652 112.346 199.627 113.72H199.651ZM248 159.845C248.083 162.572 247.08 165.221 245.211 167.213C243.341 169.205 240.758 170.378 238.024 170.477C235.285 170.385 232.696 169.214 230.821 167.221C228.947 165.228 227.941 162.576 228.024 159.845C227.935 157.11 228.938 154.452 230.813 152.454C232.688 150.456 235.281 149.282 238.024 149.19C243.236 149.19 248.024 153.659 248.024 159.845H248Z" fill="#4994EC"/>
<defs>
<filter id="filter0_f_101_2" x="-14" y="-64" width="477" height="466" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_101_2"/>
</filter>
<linearGradient id="paint0_linear_101_2" x1="74" y1="15" x2="372.995" y2="315.998" gradientUnits="userSpaceOnUse">
<stop stop-color="#88E3FF"/>
<stop offset="0.19127" stop-color="#C1C9FF"/>
<stop offset="0.338542" stop-color="#C495FF"/>
<stop offset="0.510417" stop-color="#E785FF"/>
<stop offset="0.677083" stop-color="#8B7EFF"/>
<stop offset="0.833333" stop-color="#4474FF"/>
<stop offset="0.9999" stop-color="#1251FF"/>
<stop offset="1" stop-color="#2962FF"/>
</linearGradient>
</defs>
</svg>`;

const imageDataUrl = svgToDataUrl(svgString);

function runTestCase(container) {
	const chart = (window.chart = LightweightCharts.createChart(container, {
		layout: { attributionLogo: false },
	}));

	const mainSeries = chart.addSeries(LightweightCharts.AreaSeries);
	mainSeries.setData(generateData());

	LightweightCharts.createImageWatermark(chart.panes()[0], imageDataUrl, {
		alpha: 0.5,
		padding: 20,
	});
}
